import cls from 'classnames';
import React from 'react';
import { HelpInfo, HelpInfoProps } from '../HelpInfo';
import { Typography, TypographyProps } from '../Typography';
import Style from './index.module.less';

export interface SubTitleProps extends Pick<TypographyProps, 'as'> {
  suffix?: React.ReactNode;
  title?: React.ReactNode;
  wrapStyle?: React.CSSProperties;
  style?: React.CSSProperties;
  className?: string;
  titleClassName?: string;
  useBold?: boolean;
  titleStyle?: React.CSSProperties;

  /**
   * @default false
  */
  symbol?: boolean;
  extraText?: string;
  extraTextProp?: TypographyProps;

  helpInfo?: HelpInfoProps;
}

/**
 * 副标题组件
*/
export const SubTitle = React.memo(({
  suffix,
  title = null,
  wrapStyle = {},
  titleClassName,
  className,
  as = 's5',
  useBold = true,
  titleStyle,
  extraText,
  extraTextProp,
  symbol = false,
  helpInfo
}: SubTitleProps) => (
  <div className={cls(Style.subtitle_wrap, className)} style={{ ...wrapStyle }}>
    {symbol && <div className={Style.symbol} />}
    <div className={cls(Style.title, titleClassName)}>
      <Typography as={as} useBold={useBold} style={titleStyle}>
        {title}
      </Typography>
      {
        extraText && (
          <Typography as='s1' style={titleStyle} {...extraTextProp} type="info">
            {extraText}
          </Typography>
        )
      }
      {
        helpInfo && (
          <HelpInfo {...helpInfo} />
        )
      }
      {suffix ? <div className={Style.suffix}>{suffix}</div> : null}
    </div>
  </div>
));

export default SubTitle
